<template>
  <div class="back-box">

  <div class="article-list-container">
    <div class="articletop">
      <div class="articletopl">
        <div class="articlenavitem" @click="chosenav(item)" v-for="(item, index) in navlist"
          :class="{ activenav: activenav == item.id }" :key="index">
          {{ item.name }}（{{ item.num }}）
        </div>
      </div>
      <div class="articletopr">
        <div class="articletoprsea">
          <div class="articletoprseal">
            <input placeholder="输入关键词搜索" v-model="key" class="sousuo" type="text">

          </div>
          <div @click="search()" class="seaicon"><img src="../../../assets/images/searicon.png" alt=""></div>

        </div>
        <div class="fabu" @click="gochuangzuo()">
          <div class="fabumain">
            <div class="fabuicon">
              <img src="../../../assets/images/editfabu.png" alt="">
            </div>
            <div class="fabuicontit">
              文化内容创作
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="article-list" v-if="activenav == '1'">
      <div v-for="article in articles" :key="article.articleId" class="article-item">
        <div class="article-cover-container" @click="godetai(article)">
          <img :src="article.coverUrl" :alt="article.title" class="article-cover">
        </div>
        <div class="article-info">
          <h3 class="article-title" @click="godetai(article)">{{ article.title }}</h3>
          <div class="article-author">
            <div class="article-authorl">
              发布时间：{{ article.time }}
            </div>
            <div class="article-authorr">
              <span @click="xiajia(article)">下架</span>
              <!-- <span style="margin-left: 20px;">分享</span> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fenye" v-if="activenav == '1' && articles.length > 0" style="text-align: right;margin-top: 20px;">
      <el-pagination :page-size="pageSize" :current-page="pageNumm" @current-change="changefabu" background
        layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <div class="article-list" v-if="activenav == '2'">
      <div v-for="article in articless" :key="article.articleId" class="article-item">
        <div class="article-cover-container" @click="goxiugai(article)">
          <img :src="article.coverUrl" :alt="article.title" class="article-cover">
        </div>
        <div class="article-info">
          <h3 class="article-title" @click="goxiugai(article)">{{ article.title }}</h3>
          <div class="article-author">
            <div class="article-authorl" @click="goxiugai(article)">
              更新时间：{{ article.time }}
            </div>
            <div class="article-authorr">
              <span @click="goxiugai(article)">编辑</span>
              <span @click="delwenzhang(article)" style="margin-left: 20px;">删除</span>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fenye" v-if="activenav == '2' && articless.length > 0" style="text-align: right;margin-top: 20px;">
      <el-pagination :page-size="pageSize" :current-page="pageNumm" @current-change="changecaogao" background
        layout="prev, pager, next" :total="totall">
      </el-pagination>
    </div>
    <div class="bg_box" v-if="activenav == '1' && articles.length == 0">
      <div> <img :src="bgEmpty" alt="" width="200px" height="224px" /></div>
      <div class="txt">暂无内容</div>
    </div>
    <div class="bg_box" v-if="activenav == '2' && articless.length == 0">
      <div> <img :src="bgEmpty" alt="" width="200px" height="224px" /></div>
      <div class="txt">暂无内容</div>
    </div>
  </div>
  </div>
</template>

<script>
import { yifabu, caogaolist, delwenzhangapi, xiajiaapi } from "@/api/system/kepu";
export default {
  name: 'kepucreate',
  data() {
    return {
      bgEmpty: require('@/assets/images/Default page@2x.png'),
      activenav: 1,
      total: 0,
      totall: 0,
      navlist: [
        {
          name: "已发布",
          id: 1,
          num: 0
        },
        {
          name: "草稿箱",
          id: 2,
          num: 0
        }
      ],
      articles: [

      ],
      articless: [

      ],
      key: "",
      pageNum: 1,
      pageSize: 12,
      pageNumm: 1,
      pageSizee: 12
    }
  },
  created() {
    this.getyifabu()
    this.getcaogao()

  },
  methods: {
    xiajia(item) {

      this.$confirm('确定要下架标题为"' + item.title + '"的文章吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        xiajiaapi({

          articleId: item.articleId
        }).then(res => {
          this.$modal.msgSuccess("下架成功");
          if (this.activenav == "1") {
            this.getcaogao()
            this.getyifabu()
          }
          if (this.activenav == "2") {
            this.getyifabu()

            this.getcaogao()
          }
        })
      }).catch(() => {

      });



    },
    delwenzhang(item) {
      this.$modal.confirm('确定要删除标题为"' + item.title + '"的文章吗？').then(function () {
        return delwenzhangapi(item.articleId);
      }).then(() => {
        if (this.activenav == "1") {
          this.getyifabu()
          this.getcaogao()

        }
        if (this.activenav == "2") {
          this.getyifabu()

          this.getcaogao()
        }
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },

    search() {
      this.pageNum = 1
      this.pageNumm = 1
      this.getyifabu()
      this.getcaogao()

    },
    changefabu(el) {
      this.pageNum = el
      this.getyifabu()
    },
    changecaogao(el) {

      this.pageNumm = el
      this.getcaogao()
    },
    goxiugai(item) {
      this.$router.push({
        name: 'createkepu',
        query: {
          id: item.articleId
        }

      })
    },
    godetai(item) {
      this.$router.push({
        name: 'kepudetail',
        query: {
          id: item.articleId
        }

      })
    },
    getyifabu() {
      yifabu({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyWord: this.key

      }).then(res => {
        this.articles = res.rows
        this.total = res.total
        this.navlist[0].num = this.total
      })
    },
    getcaogao() {
      caogaolist({
        pageNum: this.pageNumm,
        pageSize: this.pageSizee,
        keyWord: this.key
      }).then(res => {
        console.log("res",res)
        this.articless = res.rows
        this.totall = res.total
        this.navlist[1].num = this.totall
      })
    },
    chosenav(item) {
      this.activenav = item.id
      if (this.activenav == 1) {
        this.pageNum = 1
        this.getyifabu()

      }
      if (this.activenav == 2) {
        this.pageNumm = 1
        this.getcaogao()
      }
    },
    gochuangzuo() {
      this.$router.push({
        name: 'createkepu',

      })
    },
  }
}
</script>
<style>
input:focus {
  outline: none;
}

.bg-my-color {
  background-color: #fff;
}
</style>
<style scoped lang="scss">
.bg_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;

  .txt {
    font-weight: 400;
    font-size: 20px;
    color: #000000;
    line-height: 23px;
    text-align: center;
  }
}

.back-box{
  background: #f5f5f5;
  overflow: hidden;
}

.fenye{

}

.article-list-container {
  // max-width: 1600px;
  margin: 0 auto;
  margin:  20px;
  background-color: #fff;
  border-radius: 10px;
  height: 94vh;
  // padding: 20px;
}


.articletop {
  width: 99%;
  height: 60px;
  margin: 0 auto;
  border-bottom: 1px solid #E5E6E8;
  display: flex;
  justify-content: space-between;

  .articletopr {
    display: flex;

    .fabu {
      width: 164px;
      height: 37px;
      background: #4DC0D9;
      border-radius: 4px 4px 4px 4px;
      margin-left: 20px;
      margin-top: 11.5px;
      cursor: pointer;

      .fabumain {
        width: 85%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;

        .fabuicon {
          width: 20px;
          height: 20px;
          margin-top: 8.5px;

          img {
            width: 20px;
            height: 20px;
          }
        }

        .fabuicontit {
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 37px;
        }
      }
    }

    .articletoprsea {
      width: 80%;
      height: 37px;
      background: #F2F3F3;
      border-radius: 4px 4px 4px 4px;
      margin-top: 11.5px;
      display: flex;
      justify-content: space-between;

      .articletoprseal {
        width: 80%;

        .sousuo {
          width: 100%;
          height: 37px;
          border: none;
          background: #F2F3F3;
          border-radius: 4px 4px 4px 4px;
          padding-left: 16px;
        }
      }

      .seaicon {
        width: 20px;
        height: 20px;
        margin-top: 8.5px;
        margin-right: 15px;
        cursor: pointer;

        img {
          width: 20px;
          height: 20px;
        }
      }


    }
  }

  .articletopl {
    display: flex;

    .articlenavitem {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: #666666;
      line-height: 60px;
      margin-right: 20px;
      cursor: pointer;
    }

    .activenav {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: bold;
      font-size: 16px;
      color: #000000;
      border-bottom: 3px solid #000;
    }
  }
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.article-list {
  display: flex;
  flex-wrap: wrap;
  // margin: -10px;
  margin-top: 20px;
  height: 82%;
  overflow-y: auto;
  /* 抵消item的margin */
}

.article-item {
  cursor: pointer;
  flex: 0 0 calc(25% - 20px);
  /* 默认4个一行 */
  margin: 10px;
  // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.article-item:hover {
  transform: translateY(-5px);
}

.article-cover-container {
  position: relative;
  padding-top: 66.66%;
  /* 3:2宽高比 */
  overflow: hidden;
}

.article-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  /* 保证图片不变形 */
}

.article-info {
  // padding: 15px;
}

.article-author {
  display: flex;
  justify-content: space-between;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  line-height: 30px;
}

.article-title {
  padding-top: 10px;
  margin: 0 0 0 0;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  height: 67px;
  line-height: 28px;
  // white-space: nowrap;
  // overflow: hidden;
  // text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

}

.article-title:hover {
  color: #4DC0D9;
}

.article-author {
  margin: 0;
  font-size: 14px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .article-item {
    flex: 0 0 calc(33.333% - 20px);
    /* 3个一行 */
  }

  .articletoprsea {
    width: 300px;
  }

  .sousuo {
    width: 250px;
  }
}

@media (max-width: 768px) {
  .article-item {
    flex: 0 0 calc(50% - 20px);
    /* 2个一行 */
  }

  .articletoprsea {
    width: 300px;
  }

  .sousuo {
    width: 250px;
  }
}

@media (max-width: 480px) {
  .article-item {
    flex: 0 0 calc(100% - 20px);
    /* 1个一行 */
  }

  .articletoprsea {
    width: 300px;
  }

  .sousuo {
    width: 250px;
  }
}
</style>
